<template>
  <el-config-provider :size="getThemeConfig.componentSize">
    <router-view />
  </el-config-provider>
</template>

<script setup>
import { onMounted, nextTick, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useThemeStore } from '@/stores/themeConfig.js'

const themeStore = useThemeStore()
const { themeConfig } = storeToRefs(themeStore)

const getThemeConfig = computed(() => {
  return themeConfig.value
})

onMounted(() => {
  nextTick(() => {
    // 获取缓存中的主题配置
    const themeConfig = localStorage.getItem('themeConfig')
    if (themeConfig) {
      themeStore.setThemeConfig(JSON.parse(themeConfig))
      document.documentElement.style.cssText = localStorage.getItem('themeConfigStyle')
    }
  })
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

#app {
  height: 100vh;
  background-color: #fafafa;
}
</style>
